storybook とは何ですか?

Storybook は開発時にアプリケーションと並行して動きます。 Storybook を使用することで、UI コンポーネントをビジネスロジックやコンテキストから切り離して開発できるようになります。 この文書は React 向けです。 他にも React Native 、 Vue 、 Angular 、 Svelte 、 Ember 向けのバージョンがあります。 Storybook を開発プロセスに組み込むにあたり、いくつかの手順を踏む必要があります。 まずは、 degit を使用してビルド環境をセットアップしましょう。 このパッケージを利用することで、テンプレート（アプリケーションの一部をデフォルト設定で構築したもの）をダウンロードし、開発ワークフローの短縮に役立てることができます。

storybook for HTMLってなに?

Storybookとは保守性の高いUIコンポーネント (スタイルガイド)を素速く簡単に構築するためのツール。 オープンソースなので 商用でも無料 で使用することが可能。 Storybook for HTMLといってもHTMLだけではなくCSSやJavaScriptのスタイルガイドも構築できる。 昔はFractal、sc5-styleguide、kss-nodeなどがよく使用されていたが、 2020年現在では新規のプロジェクトの場合はStorybookが使用されることが多い。 React、Vue.js、Angular用などがあるが、この記事で説明するのは一番需要がありそうなHTML用のStorybook for HTMLのインストール手順と基本的な使い方。

.storybookってどうやって作成できますか?

Storybookが公式で出してるCLIを使えば、簡単に作成することができます。 --type でcreate-react-app用に設定してくれます。 例えば、Vueで使いたい場合は明示的に指定することもできます。 実行が完了すると、package.jsonのscriptsにStorybookのコマンドが追加されています。 storybook - ローカルで開発サーバーを立ち上げることができます。 build-storybook - 作成したストーリーをビルドします。 そして、プロジェクトを見ると .storybook というフォルダが作成されました。

ネット上に storybook の情報が増えていけばいいですか?

この記事を読み Storybook に興味を持ってくれる人が増え、ネット上に Storybook の情報が増えていけばいいな、と思います。 Storybook は React, React Native Web, Vue 向けの UI 開発環境です。 サンドボックス環境を構築し、その中でコンポーネントがどのような挙動をするのかテストできたり、コンポーネントを一望できるスタイルガイドのように使えたりします。